<template>
	<view class="home-template1">
		<view class="address" :style="bg1">
			<view class="address-box">
				<view class="item" :style="bg2" @click="handleRouter(bgObj2)"></view>
				<view class="item" :style="bg3" @click="handleRouter(bgObj3)"></view>
			</view>
		</view>
	</view>
</template>
<script>
	import {
		realmName
	} from "@/http";
	export default {
		name: "HomeTemplate1",
		data() {
			return {
				bgObj1: {},
				bgObj2: {},
				bgObj3: {},
			}
		},
		methods: {
			init(options) {
				this.bgObj1 = options.filter(item => {
					if (Number(item.configName) == 4) return item;
				})[0];
				this.bgObj2 = options.filter(item => {
					if (Number(item.configName) == 5) return item;
				})[0];
				this.bgObj3 = options.filter(item => {
					if (Number(item.configName) == 6) return item;
				})[0];
			},
			handleRouter(options) {
				if (options.uniappRoute) {
					this.$parent.handleRouter({
						name: '梅地亚酒店',
						icon: '/static/icon/home/kied.png',
						path: options.uniappRoute,
						power: ['1', '2', '3'], //权限
						id: 11,
						check: false
					});
				}
			},
		},
		computed: {
			bg1() {
				return `background: url(${realmName + this.bgObj1.logoPicAddress}) center/cover no-repeat;`;
			},
			bg2() {
				return `background: url(${realmName + this.bgObj2.logoPicAddress}) center/cover no-repeat;`;
			},
			bg3() {
				return `background: url(${realmName + this.bgObj3.logoPicAddress}) center/cover no-repeat;`;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.home-template1 {
		.address {
			position: relative;
			height: 152rpx;
			width: 100%;

			.address-box {
				position: absolute;
				right: 32rpx;
				top: 50%;
				margin-top: -55rpx;
				display: flex;

				.item {
					width: 164rpx;
					height: 110rpx;
					z-index: 1;

					&+.item {
						margin-left: 28rpx;
					}
				}
			}
		}
	}
</style>
